<template>
    <div id="goTop">
        <div class="goTop" v-show="goTopShow" @click="goTop">
            <i class="el-icon-caret-top goTopIcon"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                scrollTop: "",
                goTopShow: false
            };
        },
        watch: {
            scrollTop(val) {
                if (this.scrollTop > 300) {
                    this.goTopShow = true;
                } else {
                    this.goTopShow = false;
                }
            }
        },
        methods: {
            handleScroll() {
                this.scrollTop =
                    window.pageYOffset ||
                    document.documentElement.scrollTop ||
                    document.body.scrollTop;
                if (this.scrollTop > 300) {
                    this.goTopShow = true;
                }
            },
            goTop() {
                let timer = null,
                    _that = this;
                cancelAnimationFrame(timer);
                timer = requestAnimationFrame(function fn() {
                    if (_that.scrollTop > 0) {
                        _that.scrollTop -= 50;
                        document.body.scrollTop = document.documentElement.scrollTop =
                            _that.scrollTop;
                        timer = requestAnimationFrame(fn);
                    } else {
                        cancelAnimationFrame(timer);
                        _that.goTopShow = false;
                    }
                });
            }
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);
        },
        destroyed() {
            window.removeEventListener("scroll", this.handleScroll);
        }
    }
</script>

<style scoped>
    .goTop {
        position: fixed;
        right: 40px;
        bottom: 60px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        cursor: pointer;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    }
    .goTop:hover .goTopIcon {
        color: rgba(51, 153, 255, 1);
    }
    .goTopIcon {
        font-size: 20px;
        color: rgba(51, 153, 255, 0.8);
    }

</style>